<template>
  <div>
    <el-card>
      <el-form :inline="true" ref="form" label-width="90px">
        <el-form-item label="岗位名称">
          <el-input placeholder="岗位" v-model="CustomConditionalAssembly.name"></el-input>
        </el-form-item>
        <el-form-item label="组织">
          <el-input placeholder="组织" suffix-icon=“xxxx” v-model="CustomConditionalAssembly.mobile"></el-input>
        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="selectPage()">查询</el-button>
          <el-button @click="qk()">重置</el-button>
          <el-button @click="deleteObj()">删除</el-button>
          <el-button @click="InsertObj()">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card>
      <!-- 表 -->
      <el-table @selection-change="handleSelectionChange" :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="pdCoreStationAggregation.name" label="岗位名称"></el-table-column>
        <el-table-column prop="pdCoreStationAggregation.describe_" label="描述"></el-table-column>
        <el-table-column prop="pdCoreOrgAggregation.name" label="组织"></el-table-column>
        <el-table-column prop="pdCoreStationAggregation.status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.pdCoreStationAggregation.status">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="pdCoreStationAggregation.createTime" label="创建时间"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="updateObj(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteId(scope.row.pdCoreStationAggregation.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[ 5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sizes">
        </el-pagination>
      </div>
    </el-card>

    <!--    对话框-->
    <el-dialog title="修改" width="40%" :visible.sync="dialogFormVisible">
      <el-form :model="addObj" label-width="70px" :rules="rules">
        <el-form-item label="岗位名" prop="name">
          <el-input v-model="addObj.name"></el-input>
        </el-form-item>
        <el-form-item label="组织">
          <el-cascader v-model="addObj.orgId" @change="getJG" :props="defaultProps" :options="TreeList"
                       :show-all-levels="false" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="addObj.status" :label="true">启用</el-radio>
          <el-radio v-model="addObj.status" :label="false">禁用</el-radio>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addObj.describe_"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUpdate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import os from '../../../src/api/logisticsmanagement/organization/organizationScope'
import objAPI from '../../../src/api/rightsmanagement/postmanagement/jobManagement'

export default {
  name: 'jobManagement',
  data() {
    return {
      rules: {
        name: [{required: true, message: '请输入岗位名', trigger: 'blur'}],
      },
      dialogFormVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateTime: [],
      multipleSelection: [],
      loading: false,
      page: 1,
      size: 5,
      sizes: 0,
      tableData: [],
      CustomConditionalAssembly: {
        name: '',
        orgId: '',
        startTime: '',
        stopTime: ''
      },
      addObj: {
        id: "",
        name: "",
        orgId: "",
        status: true,
        describe_: ""
      },
      idList: [],
      TreeList: [],
      defaultProps: {
        checkStrictly: true,
        children: 'orgTreeDtoList',
        label: 'name',
        value: 'id'
      },
    }
  },
  methods: {
    selectPage() {
      this.loading = true
      this.CustomConditionalAssembly.num = this.page
      this.CustomConditionalAssembly.size = this.size
      if (this.dateTime.length > 0) {
        this.CustomConditionalAssembly.startTime = this.dateTime[0]
        this.CustomConditionalAssembly.stopTime = this.dateTime[1]
      }
      objAPI.getPage(this.CustomConditionalAssembly).then(({data}) => {
        this.page = data.data.current;
        this.size = data.data.size;
        this.sizes = data.data.total;
        this.tableData = data.data.records
        this.loading = false
      })
      this.idList = []
    },
    // 显示数
    handleSizeChange(v) {
      this.size = v
      this.selectPage()
    },
    // 上下页
    handleCurrentChange(v) {
      this.page = v
      this.selectPage()
    },
    // 获取机构树
    getTree() {
      os.queryCoreOrgAllInfo({}).then(({data}) => {
        this.dg(data.data)
        this.TreeList = data.data
      })
    },
    // 递归设置机构名称
    dg(data) {
      if (data != null) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].orgTreeDtoList.length > 0) {
            this.dg(data[i].orgTreeDtoList)
          } else {
            delete data[i].orgTreeDtoList
          }
          this.$set(data[i], 'id', data[i].pdCoreOrg.id)
          this.$set(data[i], 'name', data[i].pdCoreOrg.name)
        }
      }
    },
    // 选择机构后改变数据
    getJG(value) {
      if (value.length > 0) {
        this.addObj.orgId = value[value.length - 1]
      } else {
        this.addObj.orgId = null
      }
    },
    // 点击修改，映射数据
    updateObj(obj) {
      this.addObj.id = obj.pdCoreStationAggregation.id
      this.addObj.name = obj.pdCoreStationAggregation.name
      this.addObj.orgId = obj.pdCoreStationAggregation.orgId
      this.addObj.status = obj.pdCoreStationAggregation.status
      this.addObj.describe_ = obj.pdCoreStationAggregation.describe_
      this.dialogFormVisible = true;
    },
    // 点击添加，清空数据
    InsertObj() {
      this.qk()
      this.dialogFormVisible = true;
    },
    // 上传
    addUpdate() {
      if (this.addObj.name !== "") {
        if (this.addObj.id !== "") {
          this.$store.commit("startAnimation", true);
          objAPI.updateObj(this.addObj).then(({data}) => {
            if (data.flag) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              });
            } else {
              this.$notify.error({
                title: '失败',
                message: '修改失败'
              });
            }
            this.$store.commit("startAnimation", false);
          })
        } else {
          objAPI.insertObj(this.addObj).then(({data}) => {
            if (data.flag) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              });
            } else {
              this.$notify.error({
                title: '失败',
                message: '修改失败'
              });
            }
            this.$store.commit("startAnimation", false);
          })
        }
        this.selectPage()
        this.dialogFormVisible = false;
      }
    },
    // 删除多个
    deleteObj() {
      this.$store.commit("startAnimation", true);
      this.multipleSelection.forEach(e => {
        this.idList.push(e.pdCoreStationAggregation.id)
      })
      objAPI.deleteObj(this.idList).then((data) => {
        if (data.flag) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '失败',
            message: '删除失败'
          });
        }
        this.$store.commit("startAnimation", false);
        this.selectPage()
      })
    },
    // 删除单个
    deleteId(id) {
      this.$store.commit("startAnimation", true);
      objAPI.deleteObj([id]).then((data) => {
        if (data.flag) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '失败',
            message: '删除失败'
          });
        }
        this.$store.commit("startAnimation", false);
        this.selectPage()
      })
    },
    // 选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 清空
    qk() {
      this.CustomConditionalAssembly = {name: '', orgId: '', startTime: '', stopTime: ''}
      this.dateTime = []
      this.idList = []
      this.addObj = {id: "", name: "", orgId: "", status: true, describe_: ""}
    }
  },
  created() {
    this.selectPage()
    this.getTree()
  }
}
</script>

<style>
</style>
